<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <!-- Feuilles de style -->
        <link href="#{facesContext.externalContext.requestContextPath}/css/base.css" rel="stylesheet" type="text/css"/>
        <link href="#{facesContext.externalContext.requestContextPath}/css/search.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-apple.css"/>
        <!-- tab styling -->
        <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
        <!-- tab pane styling -->
        <style type="text/css" >
            /* tab pane styling */
            .panes div {
                display:none;
                padding:15px 10px;
                border:1px solid #999;
                border-top:0;
                height:auto;
                font-size:14px;
                background-color:#fff;
            }
            ul.tabs a {font-size: 14px;}
        </style>
        <!-- Insertion de JQuery Tools -->
        <script type="text/javascript"  src="#{facesContext.externalContext.requestContextPath}/js/jquery.tools.min.js.js"></script>
        <title>Gestion des stages UTT - Administration</title>
    </h:head>

    <h:body>
        <div id="global" class="shadow">
            <div id="top">
                <table>
                    <tr>
                        <td class="left">
                            <div id="_logo"><img src="#{facesContext.externalContext.requestContextPath}/images/logo.jpg" alt="Logo UTT" title="Logo UTT" /></div>
                        </td>
                        <td>
                            <div id="_titre">
                                <h1>Gestion des stages <span id="version">Version 1.0</span></h1>
                            </div><!-- Nom du site & Version-->
                        </td>
                        <td>
                            <div id="session" class="right">
                                <img src="#{facesContext.externalContext.requestContextPath}/images/icone-login.png" alt="En ligne" title="En ligne"/><p>Vous êtes connecté(e) en tant que <span>#{login.username}</span> </p>
                                <h:form>
                                    <h:commandButton id="logout" action="#{login.doLogout}" style="color: darkblue;background: url(#{facesContext.externalContext.requestContextPath}/images/icone-deconnexion.png) center left no-repeat; padding-left:25px" value="Déconnexion"/>
                                </h:form>
                            </div><!-- Bloc de profil utilisateur-->
                        </td>
                    </tr>
                </table>
            </div><!-- Haut de page -->

            <div>
                <div id="left">
                    <ui:insert name="left"></ui:insert>
                    <img src="#{facesContext.externalContext.requestContextPath}/images/home-icon.gif" alt="Accueil du site" title="Accueil du site" /><h3 class="textshad">Menu principal</h3>

                    <div id="menu">
                        <button rel="#ajoutEtu" type="button"><img src="#{facesContext.externalContext.requestContextPath}/images/add_ico.gif" title="Ajouter un nouveau contact" alt="Ajouter un nouveau contact"/><span>Ajouter un etudiant</span> </button>
                        <button rel="#ajoutSuiveur" type="button"><img src="#{facesContext.externalContext.requestContextPath}/images/add_ico.gif" title="Ajouter un nouveau contact" alt="Ajouter un nouveau contact"/><span>Ajouter un suiveur</span> </button>
                        <button rel="#rechercher" type="button"><img src="#{facesContext.externalContext.requestContextPath}/images/search-icone.png" title="Rechercher un contact" alt="Rechercher un contact"/> <span>Rechercher</span></button>

                        <!-- On initialise chaque Overlay -->
                        <script type="text/javascript" >
                            $(function() {
                                $("button[rel]").overlay({mask: '#000', effect: 'apple'});
                            });
                        </script>
                    </div><!-- Boutons "Ajout" + "Recherche"-->
                    <hr />
                    <div id="trie">
                        <img src="#{facesContext.externalContext.requestContextPath}/images/tri.png" alt="Trier par..." title="Trier par..."/>
                        <h3 class="textshad">Trier par : </h3>
                        <ul>
                            <li>Type</li>
                            <li>Pays</li>
                            <li>Ville</li>
                            <li>Entreprise</li>
                        </ul>
                    </div><!-- Trier par ... -->

                </div> <!-- Menu de gauche -->

                <div id="content" class="left_content">
                    <h2>
                        <ui:insert name="title"></ui:insert>
                    </h2><!-- Titre de la page en cours -->
                    <div id="ajoutEtu" class="apple_overlay">
                        <h:form id="formAddEtu">
                            <fieldset>
                                <legend>Ajout d'un Etudiant : </legend>
                                <label> Nom * <input type="text" required="required" name="nom" value="#{contacts.etudiant.nom}" maxlength="45" /> </label>
                                <label> Prénom * <input type="text" required="required" name="prenom" value="#{contacts.etudiant.prenom}" maxlength="45" /> </label>
                            </fieldset>
                            <p class="high">
                                <h:commandButton id="addEtu" value="Ajouter" action="#{contacts.doAddEtu}"/>
                                <h:commandButton type="reset" value="Annuler"/>
                            </p>
                        </h:form>
                    </div><!-- Ajout d'un Etudiant-->

                    <div id="ajoutSuiveur" class="apple_overlay">
                        <h:form id="formAddSuiveur">
                            <fieldset>
                                <legend>Ajout d'un Suiveur : </legend>
                                <label> Nom * <input type="text" required="required" name="nom" value="#{contacts.suiveur.nom}" maxlength="45" /> </label>
                                <label> Prénom * <input type="text" required="required" name="prenom" value="#{contacts.suiveur.prenom}" maxlength="45" /> </label>
                                <label> Bureau * <input type="text" name="bureau" value="#{contacts.suiveur.bureau}" maxlength="4" /> </label>
                                <label> Email * <input type="email" name="email" value="${contacts.suiveur.email}" minlength="4" /> </label>
                            </fieldset>

                            <p class="high">
                                <!--
                                <button type="submit">Ajouter</button>
                                <button type="reset">Annuler</button>
                                -->
                                <h:commandButton id="addEtu" value="Ajouter" action="#{contacts.doAddSuiveur}"/>
                                <h:commandButton type="reset" value="Annuler"/>
                            </p>
                        </h:form><!-- Ajout d'un suiveur-->
                    </div><!-- Formulaire d'ajout d'un nouveau contact (Suiveur ou Etudiant) -->

                    <div id="rechercher" class="apple_overlay">
                        <h:form id="formSearch">
                            <fieldset>
                                <legend>Recherche d'information</legend>
                                <p>
                                    <label for="typeStage">Type de stage </label>
                                    <select name="typeStage">
                                        <option value="tn09">TN09</option>
                                        <option value="tn10">TN10</option>
                                    </select>
                                </p>
                                <p>
                                    <label> Nom de l'étudiant</label>
                                    <input type="text" name="nom" value="${nom}" maxlength="45" />
                                </p>
                                <p>
                                    <label> Prénom de l'étudiant</label>
                                    <input type="text" name="prenom" value="${prenom}" maxlength="45" />
                                </p>
                                <p>
                                    <label> Entreprise</label>
                                    <input type="email" name="entreprise" value="${entreprise}" minlength="4" />
                                </p>
                                <label> Ville</label>
                                <input type="text" name="ville" value="${ville}" minlength="4" />
                                <p>
                                    <label> Pays </label>
                                    <input type="text" name="pays" value="${pays}" minlength="4" />
                                </p>
                            </fieldset>

                            <p class="high">
                                <h:commandButton id="search" value="Rechercher" action="#{contacts.doSearch}"/>
                                <h:commandButton type="reset" value="Annuler"/>
                            </p>
                        </h:form>
                    </div><!-- Formulaire de recherche -->

                    <!-- Gestion du formulaire - Validation des entrées -->
                    <script type="text/javascript" >
                        $(function() {
                            $.tools.validator.localize("fr", {
                                '*'			: 'Ce champs est requis',
                                ':email'  	: 'Entrez une adresse email valide',
                                ':number' 	: 'Entrez une valeur correcte',
                                '[required]'	: 'Ce champ est obligatoire !!'
                            });

                            // Validation du formulaire
                            $("#formAddEtu").validator({
                                lang: 'fr',
                                message: '<div><em/></div>',
                                position: 'top left',
                                offset: [3, 40]
                            });

                            // Configuration de la date
                            $(":date").dateinput({ trigger: true, format: 'dddd mmm yyyy', offset: [2, 0] });
                        });
                    </script>
                    <script type="text/javascript" >
                        $(function() {
                            $.tools.validator.localize("fr", {
                                '*'			: 'Ce champs est requis',
                                ':email'  	: 'Entrez une adresse email valide',
                                ':number' 	: 'Entrez une valeur correcte',
                                '[required]'	: 'Ce champ est obligatoire !!'
                            });

                            // Validation du formulaire
                            $("#formAddSuiveur").validator({
                                lang: 'fr',
                                message: '<div><em/></div>',
                                position: 'top left',
                                offset: [3, 40]
                            });

                            // Configuration de la date
                            $(":date").dateinput({ trigger: true, format: 'dddd mmm yyyy', offset: [2, 0] });
                        });
                    </script>
                    <script type="text/javascript" >
                        $(function() {

                            $.tools.validator.localize("fr", {
                                '*'			: 'Ce champs est requis',
                                ':email'  	: 'Entrez une adresse email valide',
                                ':number' 	: 'Arvon on oltava numeerinen',
                                '[required]'	: 'Ce champ est obligatoire !!'
                            });

                            // Validation du formulaire
                            $("#formSearch").validator({
                                lang: 'fr',
                                message: '<div><em/></div>',
                                position: 'top left',
                                offset: [3, 40]
                            });

                            // Configuration de la date
                            $(":date").dateinput({ trigger: true, format: 'dddd mmm yyyy', offset: [2, 0] });
                        });
                    </script>
                    <h3>Liste de contacts : </h3>
                    <!-- the tabs -->
                    <ul class="tabs">
                        <li><a href="#">Suiveurs</a></li>
                        <li><a href="#">&Eacute;tudiants</a></li>
                    </ul>
                    <!-- tab "panes" -->
                    <div class="panes">
                        <div>
                            <h:form>
                                <h:dataTable id="listSuiveurs" value="#{contacts.listSuiveur}" var="suiveurs">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="" />
                                        </f:facet>
                                        <h:commandLink action="#{contacts.doDelSuiveur}">
                                            <f:param name="id" value="#{suiveurs.id}"/>
                                            <h:outputText value="Supprimer" style="color: brown;background: url(#{facesContext.externalContext.requestContextPath}/images/supprimer.png) center left no-repeat; padding-left:20px"/>
                                        </h:commandLink>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Nom"/>
                                        </f:facet>
                                        <h:outputText value="#{suiveurs.nom}"/>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Prénom"/>
                                        </f:facet>
                                        <h:outputText value="#{suiveurs.prenom}"/>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Bureau"/>
                                        </f:facet>
                                        <h:outputText value="#{suiveurs.bureau}"/>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Email"/>
                                        </f:facet>
                                        <h:outputText value="#{suiveurs.email}"/>
                                    </h:column>
                                </h:dataTable>
                            </h:form>
                        </div><!-- Fin du panneau Suiveurs -->

                        <div>
                            <h:form>
                                <h:dataTable id="listEtudiants" value="#{contacts.listEtudiants}" var="etudiant">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="" />
                                        </f:facet>
                                        <h:commandLink action="#{contacts.doDelEtu}">
                                            <f:param name="id" value="#{etudiant.id}"/>
                                            <h:outputText value="Supprimer" style="color: brown;background: url(#{facesContext.externalContext.requestContextPath}/images/supprimer.png) center left no-repeat; padding-left:20px"/>
                                        </h:commandLink> <br />
                                    </h:column>
                                        <!--
                                        <h:commandLink action="#{contacts.doAssignSuiveur}">
                                        <f:param name="id" value="#{etudiant.id}"/>
                                            <h:outputText value="Ajout suiveur" style="background: url(#{facesContext.externalContext.requestContextPath}/images/ajouter.png) center left no-repeat; padding-left:20px"/>
                                        </h:commandLink>
                                        -->
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Nom"/>
                                        </f:facet>
                                        <h:outputText value="#{etudiant.nom}"/>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Prénom"/>
                                        </f:facet>
                                        <h:outputText value="#{etudiant.prenom}"/>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Suiveur de l'étudiant"/>
                                        </f:facet>
                                        <h:outputText value="#{etudiant.idSuiveur.nom} #{etudiant.idSuiveur.prenom}"/>
                                    </h:column>

                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Sujet de Stage"/>
                                        </f:facet>
                                        <h:outputText value="#{etudiant.idStage.sujet}"/>
                                    </h:column>
                                </h:dataTable>
                            </h:form>
                        </div><!-- Fin du panneau Etudiant -->
                    </div>
                    <script type="text/javascript" >

                        // perform JavaScript after the document is scriptable.
                        $(function() {
                            // setup ul.tabs to work as tabs for each div directly under div.panes
                            $("ul.tabs").tabs("div.panes > div");
                        });
                    </script>
                    <p>
                        <h3>Mémo : </h3>
                        <textarea cols="80%" rows="5" ></textarea>
                    </p>

                    <ui:insert name="contenu">Contenu principal</ui:insert>
                </div><!-- Contenu principal -->
            </div><!-- Bloc central -->
            <div class="clear"></div>
            <div id="bottom">
                <p>
                    <a href="http://www.utt.fr" title="Université de Technologie de Troyes">Université de Technologie de Troyes</a> |
                    <a href="http://era.utt.fr/" title="Environnement de Réseaux Autonomes (ERA)">Environnement de Réseaux Autonomes (ERA)</a> |
                    <a href="http://www.charlesen.fr" title="Charles EDOU NZE : &Eacute;l&egrave;ve ingénieur UTT - Homepage">Charlesen.fr - Homepage</a>
                </p>
            </div> <!-- Bas de page - Pied de page -->
        </div><!-- Bloc global -->
    </h:body>

</html>
